<template>
  <div id="el_tablelist">
    <el-table
      border
      style="width: 100%"
      tooltip-effect="light"
      :data="tableData"
      class="table"
      :height="heights"
      ref="elTable"
      @sort-change="sortChange"
      :header-cell-style="headerStyle"
      :row-class-name="tabRowClassName"
      header-row-class-name="mapTable_th"
    >
      <el-table-column width="60" align="center" type="index" label="序号" v-if="isHaveIndex">
        <template slot-scope="scope">
          <div>
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <slot name="tableHeader">
        <el-table-column
          v-for="(item, index) in tableHeader"
          :label="item.label"
          :align="item.align ? item.align : 'center'"
          :width="item.width ? item.width : '150px'"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed ? item.fixed : false"
        >
          <template slot-scope="scope">
            <div v-if="item.isImg">
              <el-image
                style="width: 100px; height: 100px; cursor: pointer"
                :src="scope.row[item.prop]"
                @click="imgCheck(scope.row[item.prop])"
              ></el-image>
            </div>
            <div v-else-if="item.isBtn">
              <el-button
                v-for="(el, index) in item.btnItem"
                :key="index"
                type="text"
                :class="el.className ? el.className : 'xg czBtn'"
                size="small"
                @click="handleClick(el.label, scope.row)"
              >
                {{ el.label }}
              </el-button>
              <span v-if="keyFilter(scope.row)">
                <el-button
                  v-if="scope.row.state"
                  type="text"
                  class="ty czBtn"
                  size="small"
                  @click="handleClick('停用', scope.row)"
                >
                  停用
                </el-button>
                <el-button v-else type="text" class="xg czBtn" size="small" @click="handleClick('启用', scope.row)">
                  启用
                </el-button>
              </span>
            </div>
            <div v-else>
              {{ scope.row[item.prop] | filterProp }}
            </div>
          </template>
        </el-table-column>
      </slot>
    </el-table>
    <div v-if="isHavePag">
      <element-pagination :Total="total" @getData="getPagChange"> </element-pagination>
    </div>
  </div>
</template>

<script>
import ElementPagination from './ElementPagination.vue'
export default {
  components: { ElementPagination },
  props: {
    // 表头内容
    tableHeader: {
      type: Array
    },
    isHaveIndex: {
      type: Boolean,
      default: true
    },
    isHavePag: {
      type: Boolean,
      default: true
    },
    heights: {
      type: [String, Number],
      default: '100%'
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }
      }
    },
    interface: {
      type: Object,
      requied: true
    },
    isQuotation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      Data: this.interface.data
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    interface() {
      return (this.Data = this.interface.data)
    }
  },
  filters: {
    filterProp(val) {
      if (typeof val === 'boolean') {
        if (val) {
          return '启用'
        } else {
          return '禁用'
        }
      } else {
        return val
      }
    }
  },
  methods: {
    tableStyleInit() {
      this.$refs.elTable.doLayout()
    },
    keyFilter(val) {
      let keyArr = Object.keys(val)
      return keyArr.some(item => {
        return item === 'state'
      })
    },
    imgCheck(url) {
      this.$emit('checkImg', url)
    },
    handleClick(label, scope) {
      this.$emit('operateClick', label, scope)
    },
    getPagChange(data) {
      // this.getData();
      this.$emit('pagChange', data)
    },
    getData() {
      this.$https({
        method: this.interface.method,
        url: this.interface.url,
        data: this.Data
      })
        .then(res => {
          if (res.code === 0) {
            if (res.data.records) {
              this.tableData = res.data.records || []
            } else {
              if (this.isQuotation) {
                this.tableData = res.data.records || []
              } else {
                this.tableData = res.data || []
              }
            }
            if (res.data.total || res.data.total == 0) {
              this.total = res.data.total || 0
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sortChange(e) {
      this.$emit('sortChange', e)
    },
    addIndex(index) {
      return index + 1 + (this.Data.page - 1) * this.Data.size
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
#el_tablelist {
  height: calc(100% - 62px);
  .xg {
    color: #166df1;
  }
  .sc,
  .ty {
    color: #ff3d3d;
  }
  /deep/ .el-table--border th,
  .el-table__fixed-right-patch {
    border-bottom: 1px solid #dad7d7 !important;
    border-right: 1px solid #dad7d7 !important;
  }
}
</style>
